第 10 集：淺談 Container Wrapper 差異

13th鐵人賽 container wrapper css container wrapper

Kent

2021-09-25 23:53:46

8202 瀏覽

分享至

此篇會探討 container 與 wrapper 用法，會著重在 wrapper 的探討。

在開始介紹前，想先說關於 container、wrapper 的關係有不少種解釋，我先簡單分為兩派。

相同派：

兩者用法相同，只有名詞不同。

異同派：

兩者用途不同。

以下內容會以 異同派 的觀點介紹 Wrapper。

Container

是一個容器，內入可包含多個元素。

特性：

設置容器大小
容器水平置中

container

Wrapper

兩種常見命名方式都可以 wrapper、wrap，其中又有分兩種解釋，下方依序來介紹。

第一種：代表最外層，包含網頁所有內容。

container

看到這張圖，是不是在想圖片放錯了呀！

wrapper1

其實要用一層一層結構來看上面這張圖，第一層是 <body>，下一層是 wrapper，兩者從結構來看其實是重疊的，因此通常會忽略。

那為什麼會需要多這一層 wrapper?

將網頁元素內容與 <body> 隔開。
將對全站樣式設置在 wrapper，避免污染到 <body>。

上述兩點也有其它方法可以達到相同效果：

<main> HTML 標籤，用來包含主要內容。
EJS 樣板語言。

第二種：內層僅包含 `單` 個元素。

wrapper2

結構來看上面這張圖，wrapper 主要用來當作銜接 container 內層元素的街口。

這樣做的好處是？

HTML 結構更清晰
語意化
好維護

我覺得有點像 BEM 連接詞的感覺，用來連接父容層器，使階層的關係一眼明瞭。

以上純屬個人言論，若有錯誤歡迎大家在下方留言，也歡迎想交流的都可以在下方留言。

示範

container

通常 .container 會作為外層容器只需設置寬度、margin、padding，且為了提升 .container 的重複利用率，建議保持外層容器的簡潔性，避免設置過多的細節樣式。

.container {
	max-width: 1296px;
	margin: 0 auto;	
}

@media(max-width:1295px){
  .container{
    padding-left: 12px;
    padding-right: 12px;
  }
}

wrapper 用兩個範例介紹

第一種範例：

<body> 需要設置的全站樣式，設置在 wrapper 上面。

<body>
  <div class="wrapper">
    <div class="container">
      container
    </div>
  </div>
</body>

.wrapper {
  padding: 40px 20px;
  line-height: 1.5;
}

.container {
  margin: 0 auto;
  max-width: 1000px;
  background: green;
  padding: 20px;
}

第二個範例：

wrapper 用來連接 container 內層元素。

<ul class="items-container">
  <li class="item-wrapper">
      <div class="item">...</div>
  </li>
  <li class="item-wrapper">
      <div class="item">...</div>
  </li>
  <li class="item-wrapper">
      <div class="item">...</div>
  </li>
  <li class="item-wrapper">
      <div class="item">...</div>
  </li>
  <li class="item-wrapper">
      <div class="item">...</div>
  </li>
</ul>